<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>消息详情 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #3B82F6;
      --secondary: #10B981;
      --danger: #EF4444;
      --light: #F9FAFB;
      --dark: #1F2937;
      --light-gray: #E5E7EB;
      --dark-gray: #6B7280;
      --white: #FFFFFF;
      --border-light: #E5E7EB;
      --border-dark: #374151;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light);
      color: var(--dark);
      height: 100vh;
      overflow-x: hidden;
      margin: 0;
    }
    
    /* 页面容器 */
    .message-detail-page {
      display: none;
      height: 100vh;
      flex-direction: column;
    }
    
    .message-detail-page.active {
      display: flex;
    }
    
    /* 顶部导航 */
    .page-header {
      padding: 16px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
      display: flex;
      align-items: center;
    }
    
    .dark .page-header {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .back-btn {
      color: var(--dark);
      background: none;
      border: none;
      font-size: 20px;
      padding: 4px;
      margin-right: 16px;
    }
    
    .dark .back-btn {
      color: var(--white);
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 600;
      flex: 1;
      text-align: center;
      margin-right: 20px; /* 平衡back-btn的宽度 */
    }
    
    .dark .header-title {
      color: var(--white);
    }
    
    /* 消息主体 */
    .message-container {
      padding: 16px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .message-container {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .message-header {
      display: flex;
      align-items: center;
      margin-bottom: 12px;
    }
    
    .sender-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .sender-info {
      flex: 1;
    }
    
    .sender-name {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 2px;
    }
    
    .dark .sender-name {
      color: var(--white);
    }
    
    .message-time {
      font-size: 13px;
      color: var(--dark-gray);
    }
    
    .dark .message-time {
      color: #9CA3AF;
    }
    
    .message-content {
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 16px;
    }
    
    .dark .message-content {
      color: var(--white);
    }
    
    .message-attachments {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      overflow-x: auto;
      padding-bottom: 8px;
    }
    
    .message-attachment {
      width: 120px;
      height: 120px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
    }
    
    .message-attachment img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .message-actions {
      display: flex;
      gap: 16px;
      padding-top: 8px;
      border-top: 1px solid var(--border-light);
    }
    
    .dark .message-actions {
      border-top-color: var(--border-dark);
    }
    
    .message-action {
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--dark-gray);
      background: none;
      border: none;
      font-size: 14px;
      padding: 4px 0;
    }
    
    .dark .message-action {
      color: #9CA3AF;
    }
    
    .message-action:hover {
      color: var(--primary);
    }
    
    /* 回复区域 */
    .replies-section {
      padding: 16px;
      flex: 1;
      overflow-y: auto;
    }
    
    .dark .replies-section {
      background-color: #111827;
    }
    
    .replies-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .dark .replies-title {
      color: var(--white);
    }
    
    .reply-item {
      padding: 12px 16px;
      background-color: var(--white);
      border-radius: 12px;
      margin-bottom: 12px;
      border: 1px solid var(--border-light);
    }
    
    .dark .reply-item {
      background-color: #1F2937;
      border-color: var(--border-dark);
    }
    
    .reply-header {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .reply-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .reply-sender {
      font-size: 14px;
      font-weight: 500;
      margin-right: auto;
    }
    
    .dark .reply-sender {
      color: var(--white);
    }
    
    .reply-time {
      font-size: 12px;
      color: var(--dark-gray);
    }
    
    .dark .reply-time {
      color: #9CA3AF;
    }
    
    .reply-content {
      font-size: 15px;
      line-height: 1.4;
      margin-bottom: 8px;
    }
    
    .dark .reply-content {
      color: var(--white);
    }
    
    .reply-actions {
      display: flex;
      gap: 16px;
    }
    
    .reply-action {
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--dark-gray);
      background: none;
      border: none;
      font-size: 12px;
      padding: 2px 0;
    }
    
    .dark .reply-action {
      color: #9CA3AF;
    }
    
    .reply-action:hover {
      color: var(--primary);
    }
    
    /* 回复输入区域 */
    .reply-input-container {
      padding: 12px 16px;
      background-color: var(--white);
      border-top: 1px solid var(--border-light);
    }
    
    .dark .reply-input-container {
      background-color: #111827;
      border-top-color: var(--border-dark);
    }
    
    .reply-input-wrapper {
      display: flex;
      gap: 10px;
      align-items: flex-end;
    }
    
    .reply-input {
      flex: 1;
      padding: 12px 16px;
      border-radius: 24px;
      border: 1px solid var(--border-light);
      background-color: var(--light);
      font-size: 15px;
      resize: none;
      min-height: 44px;
      max-height: 120px;
      overflow-y: auto;
    }
    
    .reply-input:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    .dark .reply-input {
      background-color: #1F2937;
      border-color: var(--border-dark);
      color: var(--white);
    }
    
    .reply-btn {
      padding: 10px 16px;
      border-radius: 20px;
      background-color: var(--primary);
      color: white;
      border: none;
      font-size: 15px;
      font-weight: 500;
      white-space: nowrap;
    }
    
    .reply-btn:disabled {
      background-color: var(--light-gray);
      cursor: not-allowed;
    }
    
    .dark .reply-btn:disabled {
      background-color: #374151;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 100;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    
    .dark .style-switcher {
      background-color: #1F2937;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .switcher-header {
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 500;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .switcher-header {
      border-bottom-color: var(--border-dark);
      color: var(--white);
    }
    
    .style-option {
      padding: 10px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .style-option:hover {
      background-color: var(--light);
    }
    
    .dark .style-option {
      color: var(--white);
    }
    
    .dark .style-option:hover {
      background-color: #374151;
    }
    
    .style-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 卡片风格 */
    .card-style .message-container {
      margin: 16px;
      border-radius: 16px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    
    .card-style .replies-section {
      padding-top: 0;
    }
    
    .card-style .reply-item {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .card-style .page-header {
      background-color: var(--light);
      border-bottom: none;
    }
    
    .card-style.dark .message-container,
    .card-style.dark .reply-item {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
    
    .card-style.dark .page-header {
      background-color: var(--dark);
    }
    
    /* 简约风格 */
    .minimal-style .page-header {
      padding: 12px 16px;
    }
    
    .minimal-style .message-container {
      padding: 12px 16px;
    }
    
    .minimal-style .sender-avatar {
      width: 40px;
      height: 40px;
    }
    
    .minimal-style .reply-item {
      padding: 10px 14px;
      border-radius: 8px;
    }
    
    .minimal-style .reply-avatar {
      width: 32px;
      height: 32px;
    }
    
    .minimal-style .reply-input {
      padding: 10px 14px;
      font-size: 14px;
    }
    
    .minimal-style .reply-btn {
      padding: 8px 14px;
      font-size: 14px;
    }
    
    /* 深色模式 */
    .dark {
      background-color: var(--dark);
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .reply-item {
      animation: fadeIn 0.3s ease forwards;
    }
    
    .reply-item:nth-child(1) { animation-delay: 0.1s; }
    .reply-item:nth-child(2) { animation-delay: 0.2s; }
    .reply-item:nth-child(3) { animation-delay: 0.3s; }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">页面样式</div>
    <div class="style-option active" data-style="default">默认样式</div>
    <div class="style-option" data-style="dark">深色模式</div>
    <div class="style-option" data-style="card">卡片风格</div>
    <div class="style-option" data-style="minimal">简约风格</div>
  </div>
  
  <!-- 默认样式页面 -->
  <div class="message-detail-page active" id="defaultPage">
    <!-- 顶部导航 -->
    <div class="page-header">
      <button class="back-btn" aria-label="返回">
        <i class="fa fa-arrow-left"></i>
      </button>
      <div class="header-title">消息详情</div>
    </div>
    
    <!-- 消息主体 -->
    <div class="message-container">
      <div class="message-header">
        <img src="https://picsum.photos/id/64/200/200" alt="张设计师" class="sender-avatar">
        <div class="sender-info">
          <div class="sender-name">张设计师</div>
          <div class="message-time">昨天 15:30</div>
        </div>
      </div>
      
      <div class="message-content">
        嗨，我看到了你发布的最新设计作品，非常喜欢那个移动端APP的界面设计！特别是色彩搭配和交互细节处理得很到位。我最近也在做一个类似的项目，想请教你几个关于用户体验设计的问题，不知道你有没有时间？
      </div>
      
      <div class="message-attachments">
        <div class="message-attachment">
          <img src="https://picsum.photos/id/180/400/300" alt="设计作品预览1">
        </div>
        <div class="message-attachment">
          <img src="https://picsum.photos/id/160/400/300" alt="设计作品预览2">
        </div>
      </div>
      
      <div class="message-actions">
        <button class="message-action">
          <i class="fa fa-reply"></i> 回复
        </button>
        <button class="message-action">
          <i class="fa fa-star-o"></i> 收藏
        </button>
        <button class="message-action">
          <i class="fa fa-share-alt"></i> 分享
        </button>
        <button class="message-action">
          <i class="fa fa-ellipsis-h"></i> 更多
        </button>
      </div>
    </div>
    
    <!-- 回复区域 -->
    <div class="replies-section">
      <div class="replies-title">
        <i class="fa fa-comments"></i> 回复 (3)
      </div>
      
      <div class="reply-item">
        <div class="reply-header">
          <img src="https://picsum.photos/id/91/200/200" alt="李小明" class="reply-avatar">
          <div class="reply-sender">李小明</div>
          <div class="reply-time">昨天 16:45</div>
        </div>
        <div class="reply-content">
          我也觉得这个设计很棒！特别是导航栏的交互设计很新颖，用户体验应该会很好。
        </div>
        <div class="reply-actions">
          <button class="reply-action">
            <i class="fa fa-reply"></i> 回复
          </button>
          <button class="reply-action">
            <i class="fa fa-thumbs-o-up"></i> 赞同 (5)
          </button>
        </div>
      </div>
      
      <div class="reply-item">
        <div class="reply-header">
          <img src="https://picsum.photos/id/26/200/200" alt="王大锤" class="reply-avatar">
          <div class="reply-sender">王大锤</div>
          <div class="reply-time">今天 09:12</div>
        </div>
        <div class="reply-content">
          张设计师，我也有类似的问题想请教，关于表单验证的交互反馈，你通常会怎么设计？
        </div>
        <div class="reply-actions">
          <button class="reply-action">
            <i class="fa fa-reply"></i> 回复
          </button>
          <button class="reply-action">
            <i class="fa fa-thumbs-o-up"></i> 赞同 (2)
          </button>
        </div>
      </div>
      
      <div class="reply-item">
        <div class="reply-header">
          <img src="https://picsum.photos/id/64/200/200" alt="张设计师" class="reply-avatar">
          <div class="reply-sender">张设计师</div>
          <div class="reply-time">今天 10:30</div>
        </div>
        <div class="reply-content">
          @王大锤 关于表单验证，我通常会采用实时验证+友好提示的方式，错误信息尽量具体，并且放在离输入框最近的位置，同时使用颜色和图标强化反馈。有时间可以详细交流一下。
        </div>
        <div class="reply-actions">
          <button class="reply-action">
            <i class="fa fa-reply"></i> 回复
          </button>
          <button class="reply-action">
            <i class="fa fa-thumbs-o-up"></i> 赞同 (8)
          </button>
        </div>
      </div>
    </div>
    
    <!-- 回复输入区域 -->
    <div class="reply-input-container">
      <div class="reply-input-wrapper">
        <textarea class="reply-input" placeholder="写下你的回复..."></textarea>
        <button class="reply-btn" disabled>回复</button>
      </div>
    </div>
  </div>
  
  <!-- 深色模式页面 -->
  <div class="message-detail-page dark" id="darkPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 卡片风格页面 -->
  <div class="message-detail-page card-style" id="cardPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- 简约风格页面 -->
  <div class="message-detail-page minimal-style" id="minimalPage">
    <!-- 内容与默认样式相同，通过CSS类控制样式 -->
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 复制内容到其他样式页面
    const defaultPage = document.getElementById('defaultPage');
    document.getElementById('darkPage').innerHTML = defaultPage.innerHTML;
    document.getElementById('cardPage').innerHTML = defaultPage.innerHTML;
    document.getElementById('minimalPage').innerHTML = defaultPage.innerHTML;
    
    // 获取DOM元素
    const styleOptions = document.querySelectorAll('.style-option');
    const pageContainers = document.querySelectorAll('.message-detail-page');
    const backButtons = document.querySelectorAll('.back-btn');
    const replyInputs = document.querySelectorAll('.reply-input');
    const replyButtons = document.querySelectorAll('.reply-btn');
    const messageActions = document.querySelectorAll('.message-action');
    const replyActions = document.querySelectorAll('.reply-action');
    
    // 当前激活的样式索引
    let currentStyleIndex = 0;
    
    // 切换页面样式
    styleOptions.forEach((option, index) => {
      option.addEventListener('click', function() {
        // 更新样式选项的活跃状态
        styleOptions.forEach(opt => opt.classList.remove('active'));
        this.classList.add('active');
        
        // 隐藏当前页面
        pageContainers.forEach(page => page.classList.remove('active'));
        
        // 显示选中的页面
        const styleId = this.getAttribute('data-style') + 'Page';
        document.getElementById(styleId).classList.add('active');
        
        // 更新当前样式索引
        currentStyleIndex = index;
        
        // 更新按钮引用
        updateButtonReferences();
      });
    });
    
    // 更新按钮引用（切换样式后）
    function updateButtonReferences() {
      const activePage = document.querySelector('.message-detail-page.active');
      
      // 重新绑定返回按钮事件
      const backBtn = activePage.querySelector('.back-btn');
      if (backBtn) {
        backBtn.addEventListener('click', goBack);
      }
      
      // 重新绑定回复输入事件
      const replyInput = activePage.querySelector('.reply-input');
      const replyBtn = activePage.querySelector('.reply-btn');
      
      if (replyInput && replyBtn) {
        replyInput.addEventListener('input', () => toggleReplyButton(replyInput, replyBtn));
        replyInput.addEventListener('keydown', (e) => {
          if (e.key === 'Enter' && !e.shiftKey && replyInput.value.trim() !== '') {
            e.preventDefault();
            submitReply(replyInput, activePage);
          }
        });
        replyBtn.addEventListener('click', () => submitReply(replyInput, activePage));
      }
      
      // 重新绑定消息操作按钮事件
      activePage.querySelectorAll('.message-action').forEach((btn, idx) => {
        btn.addEventListener('click', () => handleMessageAction(idx));
      });
      
      // 重新绑定回复操作按钮事件
      activePage.querySelectorAll('.reply-action').forEach((btn, idx) => {
        btn.addEventListener('click', (e) => handleReplyAction(e, idx));
      });
    }
    
    // 返回功能
    function goBack() {
      alert('返回消息列表');
    }
    
    // 切换回复按钮状态
    function toggleReplyButton(input, button) {
      if (input.value.trim() !== '') {
        button.removeAttribute('disabled');
      } else {
        button.setAttribute('disabled', 'true');
      }
    }
    
    // 提交回复
    function submitReply(input, page) {
      const replyText = input.value.trim();
      if (!replyText) return;
      
      const repliesSection = page.querySelector('.replies-section');
      const repliesList = repliesSection.querySelectorAll('.reply-item');
      const repliesCount = repliesSection.querySelector('.replies-title');
      
      // 更新回复计数
      const currentCount = parseInt(repliesCount.textContent.match(/\d+/)[0]);
      repliesCount.innerHTML = `<i class="fa fa-comments"></i> 回复 (${currentCount + 1})`;
      
      // 创建新回复元素
      const now = new Date();
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const timeString = `今天 ${hours}:${minutes}`;
      
      const newReply = document.createElement('div');
      newReply.className = 'reply-item';
      newReply.innerHTML = `
        <div class="reply-header">
          <img src="https://picsum.photos/id/177/200/200" alt="我" class="reply-avatar">
          <div class="reply-sender">我</div>
          <div class="reply-time">${timeString}</div>
        </div>
        <div class="reply-content">
          ${replyText}
        </div>
        <div class="reply-actions">
          <button class="reply-action">
            <i class="fa fa-reply"></i> 回复
          </button>
          <button class="reply-action">
            <i class="fa fa-thumbs-o-up"></i> 赞同 (0)
          </button>
        </div>
      `;
      
      // 添加到回复列表顶部
      repliesSection.insertBefore(newReply, repliesList[0] || repliesCount.nextSibling);
      
      // 为新回复添加动画
      setTimeout(() => {
        newReply.style.opacity = '0';
        newReply.style.transform = 'translateY(10px)';
        setTimeout(() => {
          newReply.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
          newReply.style.opacity = '1';
          newReply.style.transform = 'translateY(0)';
        }, 50);
      }, 10);
      
      // 绑定新回复的操作按钮事件
      newReply.querySelectorAll('.reply-action').forEach((btn, idx) => {
        btn.addEventListener('click', (e) => handleReplyAction(e, idx));
      });
      
      // 清空输入框并禁用按钮
      input.value = '';
      const replyBtn = page.querySelector('.reply-btn');
      replyBtn.setAttribute('disabled', 'true');
      
      // 滚动到新回复
      newReply.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
    
    // 处理消息操作
    function handleMessageAction(index) {
      const actions = ['回复', '收藏', '分享', '更多'];
      alert(`执行消息${actions[index]}操作`);
    }
    
    // 处理回复操作
    function handleReplyAction(e, index) {
      e.stopPropagation();
      const replySender = e.target.closest('.reply-item').querySelector('.reply-sender').textContent;
      const actions = [`回复 @${replySender}`, '赞同'];
      
      if (index === 1) {
        // 处理赞同操作
        const likeBtn = e.currentTarget;
        const likeCountText = likeBtn.textContent.trim();
        let likeCount = parseInt(likeCountText.match(/\d+/)[0]);
        
        // 更新赞同计数
        likeCount++;
        likeBtn.innerHTML = `<i class="fa fa-thumbs-up"></i> 赞同 (${likeCount})`;
        likeBtn.style.color = 'var(--primary)';
      } else {
        // 处理回复操作
        const activePage = document.querySelector('.message-detail-page.active');
        const replyInput = activePage.querySelector('.reply-input');
        replyInput.value = `@${replySender} `;
        replyInput.focus();
        
        // 启用回复按钮
        const replyBtn = activePage.querySelector('.reply-btn');
        replyBtn.removeAttribute('disabled');
      }
    }
    
    // 初始化事件绑定
    backButtons[0].addEventListener('click', goBack);
    
    replyInputs[0].addEventListener('input', () => {
      toggleReplyButton(replyInputs[0], replyButtons[0]);
    });
    
    replyInputs[0].addEventListener('keydown', (e) => {
      if (e.key === 'Enter' && !e.shiftKey && replyInputs[0].value.trim() !== '') {
        e.preventDefault();
        submitReply(replyInputs[0], defaultPage);
      }
    });
    
    replyButtons[0].addEventListener('click', () => {
      submitReply(replyInputs[0], defaultPage);
    });
    
    messageActions.forEach((btn, idx) => {
      btn.addEventListener('click', () => handleMessageAction(idx));
    });
    
    replyActions.forEach((btn, idx) => {
      btn.addEventListener('click', (e) => handleReplyAction(e, idx));
    });
  </script>
</body>
</html>